<template>
  <div>
    <header>
      <n-bar></n-bar>
      <div class="search">
        <label for="search">
          <i class="iconfont icon-fangdajing"></i>
        </label>
        <input
          type="text"
          class="iconfont"
          id="search"
          placeholder="按内容搜索"
        />
      </div>
    </header>
    <!-- 分类 -->
    <div class="cate">
      <!-- 侧边栏 -->
      <van-sidebar @change="changeBar" v-model="activeKey">
        <van-sidebar-item
          v-for="item in catelist"
          :key="item.id"
          :title="item.catename"
        />
      </van-sidebar>
      <!-- 右侧的宫格展示 -->
      <van-grid class="grid-info" :border="false" :gutter="2" :column-num="3">
        <van-grid-item
          @click="goList(item.id)"
          v-for="item in secondlist"
          :key="item.id"
        >
          <van-image :src="item.img" />
          <p class="grid-title">{{ item.catename }}</p>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
import { getCate } from "../requset/app";
export default {
  data() {
    return {
      activeKey: 0,
      catelist: [],
      secondlist: [],
    };
  },
  mounted() {
    //页面一加载就调用分类列表
    getCate().then((res) => {
      if (res.code == 200) {
        this.catelist = res.list;
        // console.log(this.catelist, "分类列表");
        this.secondlist = this.catelist[0].children;
      }
    });
  },
  methods: {
    //封装一个切换一级的方法
    changeBar(n) {
      //   console.log(n,'11111');
      this.secondlist = this.catelist[n].children;
    },
    goList(id) {
      this.$router.push({
        path: "/catelist",
        query: {
          id,
          type: 2,
        },
      });
    },
  },
};
</script>
<style scoped>
/* 头部 */
header {
  background: #ff6040;
  box-sizing: border-box;
}

header .top_box {
  height: 0.44rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 0.06rem;
  box-sizing: border-box;
}

header .top_box h3 {
  opacity: 0.8;
  font-size: 0.17rem;
  color: #ffffff;
  margin-left: 1.71rem;
}

header .top_box .more {
  width: 0.87rem;
  height: 0.32rem;
  display: flex;
  background: rgba(255, 119, 51, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 0.405rem;
  align-items: center;
  justify-content: space-evenly;
}

header .top_box .more .line {
  width: 1px;
  height: 0.19rem;
  background: rgba(255, 255, 255, 0.25);
}

header .top_box .more a span {
  font-size: 0.19rem;
  opacity: 0.8;
  color: #ffffff;
}

header .search {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.12rem;
  background-image: linear-gradient(180deg, #ff6040 0%, #ff8a80 100%);
  box-shadow: 0 2px 6px 0 rgba(255, 149, 128, 0.5);
}

header .search i {
  position: absolute;
  left: 0.15rem;
  top: 0.05rem;
  font-size: 0.16rem;
  color: #999;
}

header .search input {
  width: 3.55rem;
  height: 0.32rem;
  border: none;
  border: 1px solid #e6e6e6;
  font-size: 0.14rem;
  color: #999999;
  background: #ffffff;
  border-radius: 0.03rem;
  margin-bottom: 0.1rem;
  padding-left: 0.22rem;
  box-sizing: border-box;
}

/* 分类 */
.grid-title {
  font-size: 14px;
}

.cate {
  /* width: 100%; */
  display: flex;
}
.cate .grid-info {
  flex: 1;
}
</style>
